<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>密码比对实例</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<h1>密码比对实例</h1>
		<input type="text" name="password">
		<input type="text" name="confirm_password">
		<div id="errorTips"></div>
	</div>

<script type="text/javascript"> 
var errorTips = document.querySelector('#errorTips');
var inputs = document.querySelectorAll('input[type]');
Array.from(inputs).map(item => {
	item.addEventListener('keyup',function(){
		let msg = ""
		if(inputs[0].value != inputs[1].value || inputs[0].value.length < 5) {
			msg = "两次密码不一致或密码长度错误";
		}
		errorTips.innerHTML = msg
	});
})


</script>
</body>
</html>